<template>
  <div class="wrap">
    <aside id="dag-stencil" class="panel-left">
      <StencilTree v-if="enabled" />
    </aside>
    <main class="panel-center">
      <div class="tool-bar">
        <ToolBar
          v-if="enabled"
          :current-select="currentSelect"
          @saveStrategy="handleSaveDag"
        />
      </div>
      <div ref="x6box" class="x6-graph-box">
        <div
          id="x6-graph-container"
          class="x6-graph-container"
        />
      </div>
    </main>
    <aside class="panel-right">
      <header class="base-header-title">
        属性编辑
      </header>
      <div v-if="enabled" class="right-content">
        <!-- 判断节点 -->
        <EditConditionForm
          v-if="currentSelect === 'fork'"
          ref="conditionForm"
          :form-data="cellData"
          @updateCellData="setNodeInfo"
        />
        <!-- 算法组件 -->
        <EditOrderForm
          v-else-if="currentSelect === 'pipeline'"
          ref="orderForm"
          :form-data="cellData"
          @updateCellData="setNodeInfo"
        />
        <!-- 自定义封装的vue组件 -->
        <EditDagNodeForm
          v-else-if="currentSelect === 'dag-node'"
          ref="dagNodeForm"
          :form-data="cellData"
          @updateCellData="setNodeInfo"
        />

        <div v-else class="tips-info">
          <i class="el-icon-info" />请点击节点进行编辑
        </div>
      </div>
      <div class="navigator">
        <div class="base-header-title">
          导航器
        </div>
        <div
          id="minimap"
          ref="minimap"
          class="app-minimap"
        />
      </div>
    </aside>
    <ContextMenu v-if="enabled" />
  </div>
</template>

<script>
import DagGraph from './graph';
// import { commonEdage, commonPortsGroups } from "./const/config";
import ToolBar from './components/ToolBar/index.vue';
import ContextMenu from './components/ContextMenu/index.vue';
import EditConditionForm from './components/EditConditionForm/index.vue';
import EditOrderForm from './components/EditOrderForm/index.vue';
import EditDagNodeForm from './components/EditDagNodeForm/index.vue';
import StencilTree from './components/StencilTree/index.vue';
import { DagData } from './const/data';

let graph = null;
export default {
  name: 'EditorDag',
  components: {
    StencilTree,
    ToolBar,
    ContextMenu,
    EditConditionForm,
    EditOrderForm,
    EditDagNodeForm,
  },
  data() {
    return {
      enabled: false,
      activeName: 'nodeData',
      currentSelect: 'none', // none、edge、pipeline、fork、dag-node
      currentCell: null,
      cellData: {},
      graphData: null,
    };
  },
  created() {},
  mounted() {
    this.initDagGraph();
    setTimeout(() => {
      window.addEventListener('resize', this.resizeGraph);
    }, 200);
  },
  beforeDestroy() {
    // 移除窗口改变监听
    window.removeEventListener('resize', this.resizeGraph);
    DagGraph.destroy();
  },
  methods: {
    // 窗口改变重置画布
    resizeGraph() {
      const wrapper = this.$refs.x6box;
      if (graph && wrapper) {
        requestAnimationFrame(() => {
          const width = wrapper.clientWidth;
          const height = wrapper.clientHeight;
          graph.resize(width, height);
          graph.center(); // 内容居中
          graph.zoomTo(1); // 缩放比例
        });
      }
    },
    // 初始化x6图编辑引擎
    initDagGraph() {
      graph = DagGraph.init('#x6-graph-container', '#minimap');
      this.enabled = true;
      this.initClickEvent();
      // // 装载流程图数据
      DagGraph.initGraphShape(DagData);
    },
    // 初始化开始节点
    initGraphStart() {
      graph.clearCells();
      graph.center(); // 内容居中
      graph.zoomTo(1); // 缩放比例
      const startNode = graph.createNode({
        shape: 'start',
        x: 100,
        y: 300,
      });
      graph.addNode(startNode);
    },
    // 初始化点击事件
    async initClickEvent() {
      graph.on('blank:click', async () => {
        if (this.currentCell !== null) {
          this.clearData();
        }
      });
      graph.on('cell:click', ({ cell }) => {
        console.log('cell', cell);
        const isNode = cell.isNode();
        this.clearData();
        if (isNode) {
          this.getNodeInfo(cell);
        }
      });
    },

    // 获取被选中节点的数据
    getNodeInfo(cell) {
      this.currentSelect = cell.shape;
      console.log('currentSelect', this.currentSelect);
      this.currentCell = cell;
      Object.assign(this.cellData, cell.getData());
      const nodeAttrs = cell.getAttrs();
      console.log('nodeAttrs', nodeAttrs);

      this.cellData.name = nodeAttrs?.label?.text;
    },
    // 清空选中节点数据
    clearData() {
      const data = this.$options.data();
      this.cellData = data.config;
      this.currentCell = null;
      this.currentSelect = 'none';
      this.cellData = data.cellData;
    },
    // 设置当前选中节点的数据
    setNodeInfo(val) {
      console.log('val', val);
      this.cellData = val;
      if (val && val.name) {
        const attr = {
          label: {
            text: this.cellData.name,
          },
        };
        this.currentCell.setAttrs(attr);
      }
      const options = {
        silent: true,
        overwrite: true,
      };
      this.currentCell.setData(this.cellData, options);
    },
    // 保存dag图数据
    handleSaveDag() {
      this.graphData = graph.toJSON();
      console.log('this.graphData', this.graphData);
    },
    backPage() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";

.navigator {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 3;
}

.pannel-title {
  height: 32px;
  border-top: 1px solid #dce3e8;
  border-bottom: 1px solid #dce3e8;
  background: #ebeef2;
  color: #000;
  line-height: 28px;
  padding-left: 12px;
}
.app-minimap {
  width: 250px;
  height: 180px;
  margin: 0 auto;
}
</style>
